<template>
  <div>
    <div class="topBody">
      <div class="topBodyItem">
        <span class="itemSpan">存储仓库</span>

        <Select
          placeholder="请选择存储仓库"
          clearable
          v-model="form.stockId"
          style="width: 200px"
        >
          <Option
            v-for="item in storehouseTree"
            :value="item.id"
            :key="item.id"
            >{{ item.name }}</Option
          >
        </Select>
      </div>
      <div class="topBodyItem">
        <span class="itemSpan">供应商</span>
        <Select
          v-model="form.supplierId"
          clearable
          placeholder="请选择供应商"
          class="itemImport"
        >
          <Option v-for="item in supplyTree" :value="item.id" :key="item.id">{{
            item.name
          }}</Option>
        </Select>
      </div>
      <div class="topBodyItem">
        <span class="itemSpan">物资分类</span>
        <Select
          placeholder="请选择物资分类"
          v-model="form.goodsTypeName"
          clearable
          style="width: 200px"
        >
          <Option
            v-for="item in materialTypeList"
            :value="item.categoryName"
            :key="item.categoryName"
          >
            {{ item.categoryName }}</Option
          >
        </Select>
      </div>
      <div class="topBodyItem">
        <span class="itemSpan">物资名称</span>
        <Input
          class="flex"
          clearable
          placeholder="请输入物资名称"
          v-model="form.productName"
          style="width: 200px"
        />
      </div>
      <div class="topBodyItem">
        <cus-Button
          class="ml_20 mr_10"
          type="primary"
          @onClick="
            pages.page = 1;
            getPoinventroyListApi();
          "
          >查询</cus-Button
        >
        <cus-Button class="mr_10" type="primary" @onClick="reset()"
          >重置</cus-Button
        >
        <cus-Button class="mr_10" type="primary" @onClick="onExport()"
          >导出</cus-Button
        >
        <cus-Button
          style="background: #08b5ad; color: #ffffff"
          @onClick="getGoodscheckGenerateCheckApi()"
          >生成盘点单</cus-Button
        >
      </div>
    </div>
    <cusTable
      border
      :loading="loading"
      :columns="columns"
      :data="data"
      :size="vuex_config.tableSize"
      :bottomClass="['cus-page']"
    >
      <template slot-scope="{ row }" slot="voucherOperation">
        <div class="flex">
          <cus-button
            type="text"
            size="small"
            :style="{ color: '#1E6FFF' }"
            style="padding: 0 5px"
            @onClick="onShowVoucher(row)"
          >
            查看
          </cus-button>
        </div>
      </template>
      <template slot-scope="{ row }" slot="acceptancePicOperation">
        <div style="display: flex; justify-content: center">
          <div
            @click="onShow(row)"
            v-if="row.coursePic"
            style="height: 40px; width: 80px"
          >
            <img
              :src="row.coursePic"
              alt=""
              style="height: 100%; width: 100%"
            />
          </div>
        </div>
      </template>
    </cusTable>
    <div class="cus_page">
      <cus-page
        :data="pages"
        class="mt_10"
        @pageChange="getPoinventroyListApi()"
      ></cus-page>
    </div>
    <!-- 生成盘点单返回提示信息-->
    <excelErrorModal ref="excelErrorModal" @onOk="onOk()"></excelErrorModal>
  </div>
</template>

<script>
import {
  getBasstockList,
  getApiGoodsHandaworkSuppliername,
  getPoinventroyList,
  exportPoinventroyList,
  getGoodscheckGenerateCheck
} from "@/api/business/manager";

import { getProductCategory } from "@/api/business/dishesModule";
import excelErrorModal from "./components/excelErrorModal.vue";

export default {
  components: { excelErrorModal },
  data() {
    return {
      loading: false,
      form: {
        stockId: "", // 仓库id
        supplierId: "", // 供应商id
        goodsTypeName: "", // 物资分类名称
        productName: "", // 物资名称
        forceCheck: false // true：强制生成盘点记录。false：如果有未确认的出、入库数据，返回提示信息，不生成盘点记录
      },
      ruleValidate: {},
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          minWidth: 70
        },
        {
          title: "物资编码",
          key: "goodsCode",
          align: "center",
          minWidth: 145
        },
        {
          title: "物资名称",
          key: "productName",
          align: "center",
          minWidth: 100
        },
        {
          title: "物资分类",
          key: "goodsTypeName",
          align: "center",
          minWidth: 100
        },
        {
          title: "供应商",
          key: "supplierName",
          align: "center",
          minWidth: 100
        },
        {
          title: "存储仓库",
          key: "stockName",
          align: "center",
          minWidth: 100
        },
        {
          title: "库存数量",
          key: "packagingQty",
          align: "center",
          minWidth: 100
        },
        {
          title: "已领用数量",
          key: "packagingRealQty",
          align: "center",
          minWidth: 100
        },
        {
          title: "单位重量(Kg)",
          key: "unitWeight",
          align: "center",
          minWidth: 120
        },
        {
          title: "计量单位",
          key: "packagingUtil",
          align: "center",
          minWidth: 100
        },
        {
          title: "单价(元)",
          key: "packagingPrice",
          align: "center",
          minWidth: 100
        },
        {
          title: "金额(元)",
          key: "amount",
          align: "center",
          minWidth: 100
        },
        {
          title: "是否自产",
          align: "center",
          minWidth: 100,
          render: (h, params) => {
            return h("div", [
              h(
                "span", //1是0否
                params.row.isProduced == 1 ? "自产" : "非自产"
              )
            ]);
          }
        }
      ],
      data: [],
      storehouseTree: [], // 存储仓tree数据
      supplyTree: [], // 供应商tree数据
      materialTypeList: [], // 物资分类tree数据
      pages: {
        page: 1,
        pageSize: 10,
        pageTotal: 0
      },
      tableHeight: 0
    };
  },
  mounted() {
    this.onInit();
  },
  activated() {
    this.onInit();
  },
  methods: {
    onInit() {
      this.getBasstockListApi();
      this.getApiGoodsHandaworkSuppliernameApi();
      this.getBasicMaterialTypeApi();
      this.getPoinventroyListApi();
    },
    reset() {
      this.form = {
        stockId: "", 
        supplierId: "", 
        goodsTypeName: "", 
        productName: "", 
        forceCheck: false 
      };
      this.getPoinventroyListApi();
    },
    onOk() {
      this.form.forceCheck = true;
      this.getGoodscheckGenerateCheckApi();
    },
    // 导出
    onExport() {
      if(this.form.stockId == undefined) this.form.stockId = "";
      window.location.href = exportPoinventroyList(
        this.form.stockId,
        this.form.supplierId,
        this.form.goodsTypeName,
        this.form.productName
      );
    },
    // 物资仓库列表----------------接口
    getBasstockListApi() {
      return new Promise(resolve => {
        let params = {
          current: 1,
          size: 1000
        };
        getBasstockList(params).then(res => {
          if (res.retCode == 2000) {
            this.storehouseTree = res.data.records;
            resolve();
          }
        });
      });
    },
    // 获取供应商名称
    getApiGoodsHandaworkSuppliernameApi() {
      return new Promise(resolve => {
        getApiGoodsHandaworkSuppliername().then(res => {
          if (res.retCode == 2000) {
            this.supplyTree = res.data;
          }
          resolve();
        });
      });
    },
    // 获取物资分类-----------------接口
    getBasicMaterialTypeApi() {
      return new Promise(resolve => {
        getProductCategory().then(res => {
          if (res.code == 1) {
            this.materialTypeList = res.result;
            resolve();
          }
        });
      });
    },
    // 获取库存列表（库存查询）----------接口
    getPoinventroyListApi() {
      return new Promise(resolve => {
        let params = {
          stockId: this.form.stockId,
          supplierId: this.form.supplierId,
          goodsTypeName: this.form.goodsTypeName,
          productName: this.form.productName,
          current: this.pages.page,
          size: this.pages.pageSize
        };
        getPoinventroyList(params).then(res => {
          if (res.retCode == 2000) {
            this.data = res.data.records;
            this.pages.pageTotal = res.data.total;
            resolve();
          }
        });
      });
    },
    // 生成盘点单------------------------接口
    getGoodscheckGenerateCheckApi() {
      return new Promise(resolve => {
        let params = {
          stockId: this.form.stockId,
          supplierId: this.form.supplierId,
          goodsTypeName: this.form.goodsTypeName,
          productName: this.form.productName,
          forceCheck: this.form.forceCheck
        };
        getGoodscheckGenerateCheck(params).then(res => {
          if (res.retCode == 2000) {
            if (this.form.forceCheck == true) {
              this.$refs["excelErrorModal"].onCancel();
            }
            this.$Message.success(res.retMsg);
            resolve();
          }
          if (res.retCode == 2888) {
            this.$refs["excelErrorModal"].data = res.retMsg;
            this.$refs["excelErrorModal"].show();
          } else {
            // this.$Message.error(res.retMsg)
          }
        });
      });
    }
  }
};
</script>

<style lang="less" scoped>
.topBody {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  flex-wrap: wrap;
  .topBodyItem {
    margin-right: 12px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .itemSpan {
      white-space: nowrap;
      width: 80px;
      text-align: right;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.85) !important;
      margin-right: 10px;
    }
    .itemImport {
      width: 200px;
    }
  }
}
</style>
